<template>
    <div class="platform" v-loading="loading">
        <div class="platform-box">
            <el-form ref="formRef" :model="form" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left-six">
                    <div class="img-preview">
                        <div class="back">
                            <div class="back-btn" @click="goBack">返回</div>
                            <div class="title">房间区域相册</div>
                        </div>
                        <div class="jd-carousel">
                            <div class="carousel-wrapper">
                                <div class="main-image">
                                    <el-image :src="currentBigImage" fit="cover" />
                                </div>
                                <div class="thumbnail-list">
                                    <div>
                                        <el-icon class="arrow-left" v-show="showLeftArrow"
                                            @click="scrollThumbnails('left')">
                                            <ArrowLeftBold />
                                        </el-icon>
                                    </div>
                                    <div class="thumbnails" ref="thumbnails">
                                        <div class="thumbnail" v-for="(img, index) in thumbnailImages" :key="index"
                                            @click="changeBigImage(index)">
                                            <el-image :class="currentBigImage === img ? 'active' : ''" :src="img"
                                                fit="cover" @click="clickImg(index)" />
                                        </div>
                                    </div>
                                    <div>
                                        <el-icon class="arrow-right" v-show="showRightArrow"
                                            @click="scrollThumbnails('right')">
                                            <ArrowRightBold />
                                        </el-icon>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-right-four">
                    <div class="mgt">
                        <div class="four-header-img">
                            <div class="user-info">
                                <image-preview :src="userInfoList.headerImg" :width="50" :height="50"
                                    style="border-radius:50%"></image-preview>
                                <div class="name">{{ form.designerName }}</div>
                            </div>
                            <div class="view">{{ form.likes }}点赞｜{{ form.visits }}浏览</div>
                        </div>
                        <div class="four-title"><span>作品名称：</span>{{ form.schemeName }}</div>
                        <div class="four-detail">
                            <div class="space">
                                <div class="space-title">小区名称：</div>
                                <div>{{ form.address }}</div>
                            </div>
                            <div class="space"><div class="space-title">户型：</div><span class="space-detail"> {{
                                form.bedrooms
                            }}室{{ form.livingRooms }}厅{{ form.bathrooms }}卫{{ form.kitchens }}厨</span></div>
                            <div class="space"><div class="space-title">面积：</div><span class="space-detail">{{ form.area
                            }}m²</span></div>
                            <div class="space"><div class="space-title">风格：</div><span class="space-detail">{{ form.style
                            }}</span></div>
                            <div class="space"><div class="space-title">参考预算价：</div><span class="space-detail">¥{{
                                (parseFloat(form.priceLower) / 10000) ||
                                '-' }}万 - ¥{{ (parseFloat(form.priceUpper) / 10000) || '-' }}万</span></div>
                        </div>
                        <div class="four-content"><span style="font-weight:700">设计理念：</span>{{ form.designIdea }}</div>
                    </div>
                </div>
            </el-form>
            <div class="platform-submit-btn">
            </div>
        </div>

    </div>
</template>
<script setup>
import { getPlatformWorkDetail, getImgUrl, getAuthentication } from '@/api/decor/designer.js'
import { computed } from 'vue';
const thumbnailImages = ref([])
const currentBigIndex = ref(0)
const showLeftArrow = ref(false)
const showRightArrow = ref(true)
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const userInfoList = ref({})
const data = reactive({
    form: {}
});
const loading = ref(false)
const { form } = toRefs(data);

// 获取详情
(() => {
    const schemeId = route.params.schemeId
    if (schemeId) {
        loading.value = true
        getPlatformWorkDetail(schemeId).then((res) => {
            let _temp = []
            let imgUrlPromises = [];
            res.data.schemDetails.forEach((v) => {
                if (v.schemImgId) {
                    let promise = getImgUrl(v.schemImgId).then((res) => {
                        _temp.push({
                            schemName: v.schemName,
                            schemImgId: v.schemImgId,
                            classTypeId: v.classTypeId,
                            schemImgUrl: res.data,
                            schemDetailId: v.schemDetailId,
                            version: v.version
                        });
                    });
                    imgUrlPromises.push(promise);
                }
            })
            Promise.all(imgUrlPromises).then(() => {
                const urls = _temp.flatMap(item => item.schemImgUrl.map(img => img.url));
                form.value = res.data
                thumbnailImages.value = urls
                loading.value = false
            });
        })
    }
})();
// 获取设计师详细信息
const getUserInfo = () => {
    getAuthentication().then((res) => {
        let designerData = res;
        designerData.headerImg = '';
        let imgUrlPromises = [];
        // 获取头像的异步操作
        if (designerData.avatarId) {
            let avatarPromise = getImgUrl(designerData.avatarId).then((res) => {
                designerData.headerImg = res.data[0].url;
            });
            imgUrlPromises.push(avatarPromise);
        }
        Promise.all(imgUrlPromises).then(() => {
            userInfoList.value = designerData;
        });
    })
}
const currentBigImage = computed(() => {
    return thumbnailImages.value[currentBigIndex.value];
});
const changeBigImage = (index) => {
    currentBigIndex.value = index;
    updateArrowVisibility();
}
// 点击小图片
const clickImg = (index) => {
    const thumbnailsContainer = proxy.$refs.thumbnails;
    const containerWidth = thumbnailsContainer.offsetWidth;
    const thumbnailWidth = thumbnailsContainer.querySelector('.thumbnail').offsetWidth + 4;
    const maxRemoveScroll = thumbnailsContainer.scrollWidth - containerWidth;
    // 当前点击图片距离左侧的距离
    const leftWidth = 64 * index
    if (leftWidth + 40 >= containerWidth) {
        thumbnailsContainer.scrollLeft += thumbnailWidth;
    } else {
        thumbnailsContainer.scrollLeft -= thumbnailWidth;
    }
}
const scrollThumbnails = (direction) => {
    const thumbnailsContainer = proxy.$refs.thumbnails;
    if (thumbnailsContainer) {
        const containerWidth = thumbnailsContainer.offsetWidth;
        const thumbnailWidth = thumbnailsContainer.querySelector('.thumbnail').offsetWidth + 4;
        const maxScroll = thumbnailsContainer.scrollWidth - containerWidth;
        if (direction === 'left') {
            thumbnailsContainer.scrollLeft -= thumbnailWidth;
        } else {
            thumbnailsContainer.scrollLeft += thumbnailWidth;
        }
        updateArrowVisibility();
    }
}
const updateArrowVisibility = () => {
    const thumbnailsContainer = proxy.$refs.thumbnails;
    if (thumbnailsContainer) {
        showLeftArrow.value = thumbnailsContainer.scrollLeft >= 0;
        showRightArrow.value = thumbnailsContainer.scrollLeft < (thumbnailsContainer.scrollWidth - thumbnailsContainer.offsetWidth);
    }
}
// 返回按钮
const goBack = () => {
    router.go(-1)
}
getUserInfo()
</script>
<style lang="scss" scoped>
.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>